import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, Modal, TouchableOpacity, } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { orderStyle, commonStyle, commen } from '../_common/style';
import { MBodyCpt } from './MBodyCpt';
const scale = GLOBAL.SCALE;
export class ModalCpt extends Component {
	constructor(props) {
		super(props);
		let { isVisible } = props.data || {};
		this.state = {
			isVisible: isVisible || false
		}
	}

	componentWillReceiveProps (props) {
		if (!props || !props.data) return;
		this.setState({
			isVisible: props.data.isVisible
		})
	}

	render () {
		let { isVisible } = this.state;
		let { bodyData, modalCallBack, type } = this.props.data || {};
		return (
			<Modal transparent={true} visible={isVisible} animationType={'fade'} onRequestClose={() => { console.log(1) }}>
				<TouchableOpacity onPress={() => {
					this.setState({
						isVisible: false
					}, () => {
						modalCallBack && modalCallBack({ isVisible: false })
					})
				}} activeOpacity={1} style={styles.modalBox} >
					{
						type == 'default' ? (
							<View style={styles.modalBody}>

								{
									bodyData && bodyData.length ? (<View>
										{bodyData && bodyData.map((item, index) => {
											return (
												<Text style={styles.pt8} key={index}>{item.billNo}</Text>
											)
										})}
									</View>) : <Text style={{ paddingTop: 5 * scale, paddingBottom: 10 * scale }}>暂无运单号</Text>
								}
							</View>
						) : (
								<View style={styles.modalBody}>
									<View style={styles.modalHead}>
										<Text style={styles.modalTitle}>收发货信息</Text>
										<Image source={require('../../../../imgs/close.png')} />
									</View>
									<View style={styles.modalContain}>
										<MBodyCpt data={bodyData} />
									</View>
								</View>
							)
					}
				</TouchableOpacity>
			</Modal>
		)
	}
}

const styles = StyleSheet.create({
	modalBox: { // 弹框
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		width: '100%', height: '100%', backgroundColor: 'rgba(0, 0, 0, 0.5)'
	},
	modalBody: {
		...commen.edge,
		backgroundColor: style.color.white,
		width: 320 * scale,
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale,
		borderRadius: 4 * scale,
	},
	modalHead: {
		flexDirection: 'row',
		alignItems: "center",
		justifyContent: 'space-between',
		marginBottom: 15 * scale
	},
	modalTitle: {
		fontSize: 14 * scale,
		color: style.color.font1,
	},
	pt8: {
		paddingTop: 8 * scale
	}
})